<template>
   <div class="home_container">
      <!-- 导航栏 -->
      <van-nav-bar class="page_nav_bar" fixed>
         <!-- info 蓝色背景白色边框 -->
         <van-button
            class="search_btn"
            slot="title"
            type="info"
            size="small"
            round
            icon="search"
            to="/search"
            >搜索</van-button
         >
         <!-- to 属性 跳转页面 路径要跟路由里路径一致-->
      </van-nav-bar>
      <!-- 导航栏结束 -->
      <!-- 频道列表 -->
      <!-- 通过 v-model 绑定当前激活标签对应的索引值，
      默认情况下启用第一个标签。 -->
      <!-- 通过 animated 属性可以开启切换标签内容时的转场动画。 -->
      <!-- 通过 swipeable 属性可以开启滑动切换标签页。 -->
      <van-tabs
         v-model="active"
         animated
         swipeable
         class="channel_tabs"
      >
         <van-tab
            :title="obj.name"
            v-for="obj in channels"
            :key="obj.id"
         >
            <ArticleList :channel="obj"></ArticleList>
         </van-tab>
         <!-- 占位盒子 -->
         <div slot="nav-right" class="placeholder"></div>
         <!-- 右边的扩展符号 -->
         <div
            slot="nav-right"
            class="hamburger_btn"
            @click="isChannelShow = true"
         >
            <i class="toutiao toutiao-gengduo"></i>
         </div>
      </van-tabs>
      <!-- 频道列表 -->
      <!-- 频道编辑弹出层 -->
      <van-popup
         v-model="isChannelShow"
         closeable
         position="bottom"
         :style="{ height: '100%' }"
         close-icon-position="top-left"
      >
         <ChannelEdit
            :my_channels="channels"
            :active="active"
            @update_active="onUpdateActive"
         ></ChannelEdit>
      </van-popup>
   </div>
</template>

<script>
import { getUserChannels } from '@/api/user'
import ArticleList from './components/article_list.vue'
import ChannelEdit from './components/channel_edit.vue'
import { mapState } from 'vuex'
import { getItem } from '@/utils/storige'
export default {
   name: 'HomeIndex',
   components: {
      ArticleList,
      ChannelEdit
   },
   data() {
      return {
         // 初始激活状态
         active: 0,
         // 频道列表
         channels: [],
         // 控制频道弹出层的显示状态
         isChannelShow: false
      }
   },
   created() {
      this.loadChannels()
   },
   methods: {
      async loadChannels() {
         try {
            // const { data } = await getUserChannels()
            // // console.log(data)
            // this.channels = data.data.channels

            // let channels = []
            // if (this.user) {
            //    // 已登录，请求获取用户频道列表
            //    const { data } = await getUserChannels()
            //    channels = data.data.channels
            // } else {
            //    // 未登录，判断是否有本地的频道列表数据
            //    const localChannels = getItem(
            //       'TOUTIAO_CHANNELS'
            //    )
            //    if (localChannels) {
            //       // 本地有，直接拿来用
            //       channels = localChannels
            //    } else {
            //       // 接口设置的是：不强制用户登录，
            //       //             匿名用户返回后台设置的默认频道列表
            //       // 没有, 获取默认的频道列表
            //       const { data } = await getUserChannels()
            //       channels = data.data.channels
            //    }
            // }
            // this.channels = channels

            // 优化：
            const localChannels = getItem(
               'TOUTIAO_CHANNELS'
            )
            if (!this.user && localChannels) {
               this.channels = localChannels
            } else {
               const { data } = await getUserChannels()
               this.channels = data.data.channels
            }
         } catch (err) {
            this.$toast('获取频道列表失败')
         }
      },
      // 你传值了 用你传的 你没传用 true
      onUpdateActive(index, isChannelShow = true) {
         // 更新激活的频道项
         this.active = index
         // 关闭弹层
         this.isChannelShow = isChannelShow
      }
   },
   computed: {
      ...mapState(['user'])
   }
}
</script>

<style lang="less" scoped>
.home_container {
   padding-top: 174px;
   padding-bottom: 100px;
   /deep/ .van-nav-bar__title {
      max-width: unset;
   }
   .search_btn {
      width: 555px;
      height: 64px;
      background-color: #5babfb;
      border: none;
      font-size: 28px;
      .van-icon {
         font-size: 32px;
      }
   }
   // /deep/ 深度作用 影响后代元素
   /deep/ .channel_tabs {
      .van-tabs__wrap {
         height: 82px;
         position: fixed;
         top: 92px;
         z-index: 1;
         left: 0;
         right: 0;
      }
      .van-tab {
         min-width: 200px;
         border-right: 1px solid #edeff3;
         font-size: 30px;
         color: #777777;
      }
      .van-tab--active {
         color: #333333;
      }
      .van-tabs__nav {
         padding-bottom: 0;
      }
      .van-tabs__line {
         width: 31px !important;
         height: 6px;
         background-color: #3296fa;
         bottom: 8px;
      }
      .placeholder {
         width: 66px;
         height: 82px;
         // flex-shrink 默认 1 参与计算，0不参与 flex 布局
         flex-shrink: 0;
      }
      .hamburger_btn {
         position: fixed;
         right: 0;
         width: 66px;
         height: 82px;
         display: flex;
         justify-content: center;
         align-items: center;
         background-color: #fff;
         opacity: 0.902;
         i.toutiao {
            font-size: 33px;
         }
         &::before {
            position: absolute;
            left: 0;
            content: '';
            width: 2px;
            height: 100px;
            background-image: url('~@/assets/gradient-gray-line.png');
            // 填充 长边显示出来
            background-size: contain;
         }
      }
   }
}
</style>
